<template>
  <div>
    <div style="height: 206px;">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in swiperData" :key="item.id"
               :style="{backgroundImage:'url(' + item.url + ')'}"
               @click="openImgUrl(item)"
          ></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要滚动条 -->
        <!--    <div class="swiper-scrollbar"></div>-->
      </div>
    </div>
    <p class="carNumberTip">
      请确认您当前缴费车牌号
    </p>

    <div class="car-wrap">
      <div class="carBG" :class="carWrapBG | formateColor">
        <p class="carNumber">{{carNumber}}</p>
      </div>

      <p class="toParkRecord" @click="toParkRecord">
        是我的车，去支付
      </p>

      <p class="toPlateNumber" @click="toPlateNumber">
        不是我的车，手动输入
      </p>

    </div>


  </div>
</template>

<script>
import Swiper from 'swiper' //  应入swiper
import {swiperQuery} from '../api/navigation/navigation'

export default {
  name: 'navigation',
  data() {
    return {
      carNumber: '',  // 车牌号码
      carWrapBG: 0,// 车牌颜色
      swiperData: [], // 轮播数据
    }
  },
  mounted() {
    this.carNumber = this.$route.query.carNumber  // 车牌号码
    this.carWrapBG = this.$route.query.carNumberColor // 车牌颜色
    console.log(this.carNumber)

  },
  created() {
    this.initSWiper()
  },
  methods: {
    initSWiper() {
      var salt = this.$utils.myCommonSalt(32)
      var jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: 'md5',
        sign: '1',
        orgId: this.$utils.myOrgId,
        jumpType: '8'
      };
      // jsondata = JSON.stringify(jsondata);
      swiperQuery(jsondata).then(res => {
        this.swiperData = res.data
        console.log(this.swiperData)
        new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          centeredSlides: true,
          notNextTick: true,
          autoplay: 5000,
          autoplayDisableOnInteraction: true,

          observer: true,       //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          onSlideChangeStart: function (swiper) {
            //console.log(swiper.activeIndex)
          }
        })
      })
    },
    openImgUrl(i) { // 点击图片跳转
      window.open(i.jumpUrl)
    },
    toPlateNumber() { //  前往输入车牌页面
      this.$router.push({
          path: 'plateNumber',

        }
      )
    },
    toParkRecord() { //  前往停车记录页面
      this.$router.push({
        path: 'parkRecord',
        query: {
          carNumber: this.carNumber,
          carNumberColor: this.carWrapBG
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
  .swiper-container {
    height: 206px;
  }

  .swiper-slide {
    /*width: 100%;*/
    height: 206px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .carNumberTip {
    width: 200px;
    margin: 20px auto 10px;
    padding-left: 20px;
    background: url("../assets/images/tip.png") no-repeat 0 center;
    background-size: 14px 14px;
    text-align: center;
  }

  .car-wrap {
    padding: 0px 40px;
    background: #FFF;
  }

  .carBG {
    width: 100%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 24px;
    color: #fff;
  }

  .carBlue {
    background: url("../assets/images/blueBG.png") no-repeat;
    background-size: 100% 100%;
  }

  .carYellow {
    background: url("../assets/images/yellowBG.png") no-repeat;
    background-size: 100% 100%;
  }

  .carGreen {
    background: url("../assets/images/greenBG.png") no-repeat;
    background-size: 100% 100%;
  }

  .carWhite {
    background: url("../assets/images/whiteBG.png") no-repeat;
    background-size: 100% 100%;
  }

  .carBlack {
    background: url("../assets/images/blackBG.png") no-repeat;
    background-size: 100% 100%;
  }

  .toParkRecord {
    margin-top: 40px;
    margin-bottom: 20px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    background: url("../assets/images/toParkRecord.png") no-repeat;
    background-size: 100% 50px;
    cursor: pointer;
  }

  .toPlateNumber {
    text-align: right;
    cursor: pointer;
  }

</style>
